<style scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.nbData {
  position: fixed;
  /* position: relative; */
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  /* height: 400px; */
  z-index: 99;
  background-color: white;
  overflow: auto;
  /* padding: 10px 15px; */
}
.nbData > div:first-child {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: #f4f4f4;
  font-weight: 700;
}
/* .inp{
        padding: 15px;
    } */
.inp > div {
  display: flex;
}
.inp > div p {
  margin: 3px 0 0 0;
  display: inline-block;
  white-space: nowrap;
  width: 70px;
  text-align: end;
  margin-right: 6px;
}
.wd {
  width: 160px;
}
</style>

<style>
.nbData .inp .el-input__inner {
  height: 30px;
}
</style>

<template>
  <div class="NBData">
    <div class="mask"></div>
    <div class="nbData">
      <div>
        <p>{{ title }}资料</p>
        <i class="el-icon-close" @click="closenewdata"></i>
      </div>
      <div style="padding:15px;">
        <div class="inp">
          <div>
            <p>客户编号</p>
            <el-input class="wd" disabled v-model="directSaleNo"></el-input>

            <p>VIP</p>
            <el-input
              v-model="phone"
              class="wd"
              placeholder="请输入手机号码"
            ></el-input>

            <p>客户简称</p>
            <el-input class="wd" v-model="name"></el-input>

            <p>折数</p>
            <el-input class="wd" @blur="leaveInp" v-model="discount"></el-input>
          </div>
          <div style="margin-top:10px;">
            <p>生日</p>
            <el-input class="wd" v-model="birthday"></el-input>
            <!-- <el-select class="wd" v-model="birthday">
                            <el-option
                                v-for="item in warehouseNoList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select> -->

            <p>地址</p>
            <el-input class="wd" v-model="address"></el-input>

            <p>备注</p>
            <el-input style="width:396px;" v-model="remark"></el-input>
          </div>
        </div>

        <el-table
          :data="eData"
          style="width: 100%;margin:15px 0;"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px',
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="date" label="VIP"> </el-table-column>
          <el-table-column prop="name" label="客户简称"> </el-table-column>
          <el-table-column prop="address" label="折数"> </el-table-column>
          <el-table-column prop="address" label="生日"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="address" label="备注"> </el-table-column>
        </el-table>

        <div style="text-align:end;">
          <el-button @click="closenewdata">取消</el-button>
          <el-button @click="preservation" type="primary" plain>保存</el-button>
          <el-button @click="keepgoing" type="primary">继续录入</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getShop, postBuild } from "../../../../network/shop";
export default {
  props:
    // ['title','details'],
    {
      title: {
        type: String,
        default: "",
      },
      details: {
        type: Object,
        default: {},
      },
    },
  data() {
    return {
      warehouseNoList: [],
      eData: [],
      directSaleNo: "",
      phone: "",
      name: "",
      discount: "",
      birthday: "",
      address: "",
      remark: "",
      id: "",
    };
  },
  created() {
    //获取客户编号
    getShop().then((res) => {
      console.log(res.data);
      this.directSaleNo = res.data.data.no;
    });
  },
  methods: {
    // 失去焦点的时候，触发这个自定义的验证规则
    leaveInp() {
      var tst = /^([1-9]|10)$/;
      if (!tst.test(this.discount)) {
        this.$message.warning({ message: "折数为1-10之间", offset: 400 });
        this.discount = 10;
        return;
      }
    },
    closenewdata() {
      this.clean();
      this.$emit("closenewdata");
    },
    //保存
    preservation() {
      if (this.discount == "") {
        this.$message.warning({ message: "请填写折数", offset: 400 });
        return;
      }
      if (this.title == "新建") {
        var obj = {
          directSaleNo: this.directSaleNo,
          phone: this.phone,
          name: this.name,
          discount: this.discount,
          birthday: this.birthday,
          address: this.address,
          remark: this.remark,
        };
        this.$emit("preservation", obj);
        this.clean();
      }
      if (this.title == "编辑") {
        var obj = {
          directSaleNo: this.directSaleNo,
          phone: this.phone,
          name: this.name,
          discount: this.discount,
          birthday: this.birthday,
          address: this.address,
          remark: this.remark,
          id: this.id,
        };
        this.$emit("put", obj);
        this.clean();
      }
    },
    //继续录入
    keepgoing() {
      if (this.discount == "") {
        this.$message.warning({ message: "请填写折数", offset: 400 });
        return;
      }
      let obj = {
        directSaleNo: this.directSaleNo,
        phone: this.phone,
        name: this.name,
        discount: this.discount,
        birthday: this.birthday,
        address: this.address,
        remark: this.remark,
      };
      postBuild(obj).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message({ type: "success", message: "保存成功" });
          this.clean();
          this.$emit("keepgoing");
        } else {
          this.$message.error({ message: "保存失败" });
        }
      });
    },
    clean() {
      // this.directSaleNo = '',
      (this.phone = ""),
        (this.name = ""),
        (this.discount = ""),
        (this.birthday = ""),
        (this.address = ""),
        (this.remark = "");
    },
  },
  watch: {
    name(a, b) {
      this.name = this.name.toUpperCase().trim();
    },
    details(a, b) {
      this.phone = a.phone;
      this.name = a.name;
      this.discount = a.discount;
      this.birthday = a.birthday;
      this.address = a.address;
      this.remark = a.remark;
      this.id = a.id;
    },
  },
};
</script>
